<template>
    <transition name="modal">
        <div class="modal-mask" v-show="open">
                <div class="modal-container">
    
                    <div class="modal-header">
                        <div class="row">
                            <div class="col-lg-12">
                                <h4>现金微信结账</h4>
                            </div>
                            
                        </div>
                       
                        
                        <button type="button" class="close" @click="$emit('close')">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </button>
                    </div>
    
                    <div class="modal-body">
                        <div class="row limte-height">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <h4>
                                            用户 <span class="text-danger">公账用户</span>,
                                            余额 <span class="text-danger">{{balance}}元</span>,
                                            本单总价 <span class="text-danger">{{total.toFixed(2)}}元</span>
                                        </h4>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <h4>订单信息</h4>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <template v-for="(good,gk) in cart">
                                                <div class="col-lg-3" :key="gk">
                                                    <div class="good-item">
                                                        {{good.name}}-
                                                        <span class="text-info">{{good.price}}元</span>
                                                        <span class="text-danger">x {{good.cartQty}}</span>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <h4></h4>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        
    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn-lg" :disabled="paing" @click="payOrder" v-show="!paid"> 买 单 </button>
                        <button type="button" class="btn btn-warning btn-lg" @click="completeOrder" v-show="paid"> 出 单 </button>
                        <button type="button" class="btn btn-default btn-lg" @click="$emit('close')"> 关 闭 </button>
                    </div>
                </div>
          
        </div>
    </transition>
</template>
<script>
import {tip,ajax} from '../../tools/tools.js'
import {cfg} from '../../config/config.js'

export default {
    name: 'ConfirmOrderWModal',
    data() {
        return {
            user_token:'',
            order_id:'',
            order:{},
            list:{},
            total:0,

            paid:false,

            paing:false
        }
    },
    props:{
        open:{
            type:Boolean,
            default:false
        },
        phone:{
            type:String,
            default:''
        },
        level:{
            type:String,
            default:'0'
        },
        balance:{
            type:Number,
            default:0
        },
        cart:{
            type:Object,
            default:function(){
                return {}
            }
        }
    },
    computed:{
        
    },
    watch:{
        open(v,ov){
            this.clearData();
        },
        phone(v,ov){
            if(v!=''){
                this.createUserToken();
            }
        },
        cart:{
            deep:true,
            handler(v,ov){
                this.calcTotal();
            }
        }
    },
    methods: {
        clearData(){
            var self = this;
            this.user_token = '';
            this.order_id = '';
            this.order = {};
            this.list = {};
            this.total = 0;
            this.paid = false;
        },
        calcTotal(){
            var self = this;
            this.total = 0;
            for (const key in self.cart) {
                if (self.cart.hasOwnProperty(key)) {
                    const element = self.cart[key];
                    var p = parseFloat(element.price)*element.cartQty;
                    this.total += p;
                }
            }
        },
        payOrder(){
            var self = this;
            var carts = [];
            for (const key in self.cart) {
                if (self.cart.hasOwnProperty(key)) {
                    const v = self.cart[key];
                    var obj = {fkGoods:v.id,qty:v.cartQty}
                    carts.push(obj);
                }
            }

            if(carts.length==0){
                tip.warn('没有货品')
                return
            }

            self.calcTotal();

            ajax.fCreateOrder({
                type:'post',
                param:{
                    goodsArray:JSON.stringify(carts),
                    token:self.user_token
                },
                cb(data){
                    if(data.rcode=='C404'){
                        tip.warn('商品无库存')
                        return;
                    }
                    self.order_id = data.data;
                    var shoppingOrder = {
                        erpressBoxAddress:'',
                        id:self.order_id,
                        isBalance:'1',
                        isSendToHome:'0',
                        remark:'线下现金微信支付'
                    }
                    // console.log(shoppingOrder)
                    self.setOrderInfo(shoppingOrder,self.total);
                }
            })
        },
        setOrderInfo(par,m){
            var self = this;
            self.paing = true;
            ajax.fUpdateOrder({
                type:'post',
                param:{
                    shoppingOrder:JSON.stringify(par),
                    token:self.user_token
                },
                cb(data){
                    var cpar = {
                        method:3,
                        money:m,
                        orderId:self.order_id,
                        token:self.user_token,
                        transactionNumber:self.order_id
                    }
                    ajax.fOrderPayComplete({
                        type:'post',
                        param:cpar,
                        cb(cdata){
                            tip.info('支付完成');
                            self.paid = true;
                            self.paing = false;
                            self.$emit('paydone');
                        },
                        failCb(){
                            self.paing = false;
                        }
                    })
                },
                failCb(){
                    self.paing = false;
                }
            })
        },
        createUserToken() {
            var self = this;
            ajax.getTokenByPhone({
                type: 'post',
                param: {
                    token: localStorage.token,
                    phoneNum: self.phone
                },
                cb(data) {
                    self.user_token = data.data;
                }
            })
        },

        completeOrder(){
            var self = this;

            var state = '6';
            ajax.updateOrderState({
                type:'post',
                param:{
                    id:self.order_id,
                    state,
                    token:localStorage.token
                },
                cb(data){
                    ajax.getOrderList({
                        type: 'post',
                        param: {
                            id: self.order_id,
                            token: localStorage.token
                        },
                        cb(order) {
                            var v = order.datalist[0];
                            var list = v.details.map((g,i)=>{
                                var obj = {};
                                obj.n = escape(g.name);
                                obj.q = g.qty;
                                obj.p = g.price;
                                
                                return obj;
                            })

                            var info = {};
                            info.ish = v.isSendToHome;
                            info.t = v.totalMoney;
                            info.n = 'ccb';

                            var address = {areas:'',house:''}
                            try{
                                address = JSON.parse(v.erpressBoxAddress);
                            }catch(e){
                                address.house = v.erpressBoxAddress?v.erpressBoxAddress.replace('&',''):'';
                            }
                            var address_str = address.areas+address.house;
                            info.a = escape(address_str);
                            info.b = v.booksingTime;
                            info.m = escape(v.remark?v.remark:'无');
                            
                            var l = JSON.stringify(list);
                            var i = JSON.stringify(info);

                            window.open('../public/test.html?l='+l+'&i='+i);

                        }
                    })
                }
            })
        }
    },
    mounted() {
        
    }
}
</script>
<style scoped>
.good-item {
    font-size: 20px;
    padding: 5px;
    border: solid 2px #f90;
    padding: 10px;
    margin: 6px;
    text-align: center;
}
.modal-mask {
    position: fixed;
    z-index: 10001;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity .3s ease;
}

.limte-height {
    max-height: 550px;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-container {
    position: absolute;
    left: 20px;
    top: 70px;
    bottom: 20px;
    right: 20px;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    overflow-y: auto;
}

.modal-header h3 {
    margin-top: 0;
    color: #42b983;
}

.modal-default-button {
    float: right;
}

.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
</style>
